
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>搭建基于Octopress的博客 - 乐の博客</title>
	<meta name="author" content="zhidong">

	
	<meta name="description" content="搭建基于Octopress的博客 2019.11.12更新 关于系统更新到MacOS 10.14之后ruby环境的调整，以及多说关闭之后评论系统的选择。 系统更新到10.14之后 gem install工具会出错： 1
2
3
4
5
$ sudo gem install bundler &hellip;">
	<meta name="keywords" content="Octopress,blog">

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="/atom.xml" rel="alternate" title="乐の博客" type="application/atom+xml">
	
	<link rel="canonical" href="https://zhidong.rochu.cn/blog/2015/07/29/da-jian-ji-yu-octopressde-bo-ke/">
	<link href="/favicon.png" rel="shortcut icon">
	<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="/javascripts/libs/jquery.min.js"></script>
	<!-- <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'> -->
	
</head>


<body>
	<div class="container">
		<div class="left-col">
			<div class="intrude-less">
			<header id="header" class="inner"><div class="profilepic">	
	<script src="/javascripts/md5.js"></script>
	<script type="text/javascript">
		document.write("<img src='/images/pingtouge.png' alt='Profile Picture' style='width: 160px;' />");
	</script>
</div>
<h1><a href="/">乐の博客</a></h1>
<p class="subtitle">行而不思则罔，思而不行则怠</p>
<nav id="main-nav"><ul>
	<li><a href="/">Blog</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/portfolio">Portfolio</a></li>
	<li><a href="/archives">Archive</a></li>
</ul>
</nav>
<nav id="sub-nav">
	<div class="social">
		
		<a class="weibo" href="http://www.weibo.com/agdsdl" title="Weibo">Weibo</a>
		
		
		
		
		
		<a class="github" href="https://github.com/agdsdl" title="GitHub">GitHub</a>
		
		
		
		
		
		
		
		<a class="rss" href="/atom.xml" title="RSS">RSS</a>
		
	</div>
</nav>
<p class="description">知冬的后花园</p>
</header>				
			</div>
		</div>	
		<div class="mid-col">
			
				
			
			<div class="mid-col-container">
				<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="title" itemprop="name">搭建基于Octopress的博客</h1>
	<div class="entry-content" itemprop="articleBody"><h2>2019.11.12更新</h2>

<p>关于系统更新到MacOS 10.14之后ruby环境的调整，以及多说关闭之后评论系统的选择。</p>

<h3>系统更新到10.14之后</h3>

<p><code>gem install</code>工具会出错：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ sudo gem install bundler
</span><span class='line'>Password:
</span><span class='line'>Fetching: bundler-2.0.2.gem (100%)
</span><span class='line'>ERROR:  While executing gem ... (Gem::FilePermissionError)
</span><span class='line'>    You don't have write permissions for the /usr/bin directory.</span></code></pre></td></tr></table></div></figure>


<p>这是因为Apple在OS X El Capitan中全面启用了名为System Integrity Protection (SIP)的系统完整性保护技术。大部分系统文件禁止直接修改。</p>

<p>要退出SIP需要重启到recovery模式下进行（重启按住command+r），这里采取另一个办法：
<code>/usr/bin</code>禁止写入后，一般都用<code>/usr/local/bin</code>目录替代。<code>gem install</code>可以使用 <code>-n install_path</code>指定安装路径：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>sudo gem install xxx -n /usr/local/bin</span></code></pre></td></tr></table></div></figure>


<p>bundle install的时候还会出错:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ bundle install --path vendor/bundle
</span><span class='line'>Fetching gem metadata from https://rubygems.org/..........
</span><span class='line'>Using rake 10.5.0
</span><span class='line'>Fetching RedCloth 4.2.9
</span><span class='line'>Installing RedCloth 4.2.9 with native extensions
</span><span class='line'>Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
</span><span class='line'>  ...
</span><span class='line'>mkmf.rb can't find header files for ruby at
</span><span class='line'>/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/include/ruby.h
</span><span class='line'>
</span><span class='line'>extconf failed, exit code 1</span></code></pre></td></tr></table></div></figure>


<p>因为macos10.14之后xcode11内置了macos10.15的SDK，预装了ruby2.6，没有ruby2.3的目录</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0</span></code></pre></td></tr></table></div></figure>


<p>但是CommandLineTools里面还有macos10.14的SDK：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>/Library/Developer/CommandLineTools/SDKs/MacOSX10.14.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/include/ruby-2.3.0</span></code></pre></td></tr></table></div></figure>


<p>通过</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>sudo xcode-select --switch /Library/Developer/CommandLineTools</span></code></pre></td></tr></table></div></figure>


<p>来切换SDK路径</p>

<p>用</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>ruby -rrbconfig -e 'puts RbConfig::CONFIG["rubyhdrdir"]'</span></code></pre></td></tr></table></div></figure>


<p>可以看到路径正确。</p>

<p>之后<code>bundle install</code>可以正常安装。</p>

<p>需要切换回xode11的sdk时：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>sudo xcode-select --switch /Applications/Xcode.app</span></code></pre></td></tr></table></div></figure>


<h3>评论系统的选择</h3>

<p>博客之前采用多说作为评论系统，可是多说关闭了，类似的友言、网易云跟帖等国内评论系统也相继停止服务。Disqus在国内一直被墙，需要重新选择一个评论系统。</p>

<p>看了几天，基本瞄中了基于github issue的评论系统，如果blog也host在github上，那么就很相得益彰。它的数据也没那么容易丢失，除非github倒闭。。。</p>

<p>一开始选择了名气较大的gitment，试用用了一下发现目前已不可用了：
由于采用github API操作issue，因此带来了跨站(CORS)问题，而github禁止跨站，无法直接访问。</p>

<p>解决办法是加一个中间代理服务器，给服务器返回头上添加跨站运行标志。
gitment作者本来自己搭了个代理服务器给大家使用，可是现在已经停服了，如果自己搭代理服务器代价还是颇高的。
而作者已经弃坑，两年多没有更新了，无奈弃之。</p>

<p>后来发现了类似的评论系统：<a href="https://github.com/gitalk/gitalk">gitalk</a>，最近一年还在更新，试了下目前可用。
它是怎么解决跨站问题呢？抓包看了下，发现它采用了Heroku提供的API，专门用于转发请求并允许CORS访问：<a href="https://cors-anywhere.herokuapp.com">https://cors-anywhere.herokuapp.com</a></p>

<p>看来允许跨站请求头是个比较常见的问题。
gitalk的接入方式类似gitment：</p>

<ul>
<li>首先要在github中新建一个OAuth Application，记下Client ID和Client Secret</li>
<li>修改_layouts下面的post.html，在最下面添加：</li>
</ul>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;section id="comment"&gt;
</span><span class='line'>    &lt;h1 class="title"&gt;Comments&lt;/h1&gt;
</span><span class='line'>    &lt;div id="gitalk-container"&gt;&lt;/div&gt;
</span><span class='line'>    &lt;link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"&gt;
</span><span class='line'>    &lt;script src="https://unpkg.com/gitalk/dist/gitalk.min.js"&gt;&lt;/script&gt;
</span><span class='line'>    &lt;script&gt;
</span><span class='line'>    const gitalk = new Gitalk({
</span><span class='line'>      clientID: 'GitHub Application Client ID',
</span><span class='line'>      clientSecret: 'GitHub Application Client Secret',
</span><span class='line'>      repo: 'GitHub repo',
</span><span class='line'>      owner: 'GitHub repo owner',
</span><span class='line'>      admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
</span><span class='line'>      id: location.pathname,      // Ensure uniqueness and length less than 50
</span><span class='line'>      distractionFreeMode: false  // Facebook-like distraction free mode
</span><span class='line'>    })
</span><span class='line'>    gitalk.render('gitalk-container')
</span><span class='line'>    &lt;/script&gt;
</span><span class='line'>&lt;/section&gt;</span></code></pre></td></tr></table></div></figure>


<p>GitHub repo可以直接填blog所在的repo，方便集中管理。</p>

<p>博客发出之后需要自己先浏览并登录github账号，以初始化<code>issue page</code>，之后就可以正常评论了。</p>

<!-- more -->


<h2>概要</h2>

<p>不同于其他博客网站，Octopress不需要在网站上编辑页面和发布；
你只需本地写好markdown文件，然后<code>rake generate</code>就可以生成博客空间的所有静态网页，
然后<code>rake deploy</code>就可以将网站更新到服务器。
Octopress支持两种更新方式：github和Rsync</p>

<h3>github</h3>

<p>github提供了免费的静态网页托管服务，你需要新建一个名为username.github.io的代码仓库，将你的网站推送到这个仓库，
之后就可以用浏览器访问你的网站了：username.github.io
采用github更新方式，本质上就是将Octopress生成的本地页面推送到username.github.io
由于github是免费的，通过git管理网站，并且支持CNAME域名指向，这真是一种方便又快捷的建站方式，
因此Octopress推荐使用这种方式，<a href="http://blog.devtang.com/2012/02/10/setup-blog-based-on-github/">唐巧的博客</a>和本博采用的也是这种方式。</p>

<h3>Rsync</h3>

<p>然而你可能有了自己的服务器，或者站点里包含一些动态页面，必须使用自己的服务器。
这时你就可以用Rsync同步方法将网站同步到你的服务器。
Rsync本质是通过ssh将文件拷贝到服务器，
你可以看<a href="http://octopress.org/docs/deploying/rsync/">这篇官方文档</a>，这里就不深入阐述了。</p>

<h2>Octopress安装</h2>

<p>如果你运行的是苹果系统（10.9）并且安装了Xcode，你可以先运行以下命令验证一下：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>ruby --version  # Should be greater than 1.9.2</span></code></pre></td></tr></table></div></figure>


<p>如果版本号大于等于1.9.2，那么唐巧的博客中下面几步是不需要的：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>brew update
</span><span class='line'>brew install rbenv
</span><span class='line'>brew install ruby-build
</span><span class='line'>
</span><span class='line'>rbenv install 1.9.3-p0
</span><span class='line'>rbenv local 1.9.3-p0
</span><span class='line'>rbenv rehash
</span><span class='line'>
</span><span class='line'>brew tap homebrew/dupes
</span><span class='line'>brew install apple-gcc42</span></code></pre></td></tr></table></div></figure>


<p>按照<a href="http://octopress.org/docs/setup/">官网</a>指导，只需要下面几步：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git clone git://github.com/imathis/octopress.git octopress
</span><span class='line'>cd octopress
</span><span class='line'>
</span><span class='line'># Next, install dependencies.
</span><span class='line'>gem install bundler
</span><span class='line'>bundle install</span></code></pre></td></tr></table></div></figure>


<p>bundle install的时候可能会出错，这是因为国内的墙，得把RubyGems源换成taobao的源：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ bundle config mirror.https://rubygems.org https://ruby.taobao.org</span></code></pre></td></tr></table></div></figure>


<p>见<a href="http://ruby.taobao.org/">http://ruby.taobao.org/</a></p>

<p>然后再</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>bundle install</span></code></pre></td></tr></table></div></figure>


<p>这样就安装好啦！</p>

<h2>第一篇博客</h2>

<p>现在我们先试着写一篇：（保持当前目录在octopress目前）</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>rake new_post["hello"]</span></code></pre></td></tr></table></div></figure>


<p>如果正确无误的话，命令行会输出：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>mkdir -p source/_posts
</span><span class='line'>Creating new post: source/_posts/2015-07-27-hello.markdown</span></code></pre></td></tr></table></div></figure>


<p>我们再依次键入以下命令：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>echo "hello world" &gt; source/_posts/2015-07-27-hello.markdown
</span><span class='line'>rake generate
</span><span class='line'>rake preview</span></code></pre></td></tr></table></div></figure>


<p>我们可以看到web服务已经启动，用浏览器打开127.0.0.1:4000就能看到自动生成的博客站点，怎么样，是不是很漂亮？</p>

<p>在终端上按下Ctrl-C可以终止web服务。</p>

<h2>配置</h2>

<p>我们的web站点已经有了基本框架！可是站点的标题，边栏，风格还都是默认的，这些要怎么改？
主要配置文件是<code>_config.yml</code>，网站标题、副标题等都在这里设置：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>url: http://agdsdl.github.io/             #网站地址
</span><span class='line'>title: 乐の博客                            #网站标题
</span><span class='line'>subtitle: 行而不思则罔，思而不行则怠          #网站副标题
</span><span class='line'>author: agdsdl                            #网站作者，通常显示在页尾和每篇文章的尾部
</span><span class='line'>simple_search: http://google.com/search   # 搜索引擎
</span><span class='line'>description: 一个软件工程师的呓语            #网站的描述，出现在HTML页面中的 meta 中的 description</span></code></pre></td></tr></table></div></figure>


<h3>导航栏配置：</h3>

<p>修改<code>source\_includes\custom\navigation.html</code>，该文件是html模板，将其修改成你想要的样子。
如：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;main-navigation&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;/&quot;</span><span class="nt">&gt;</span>首页<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
</span><span class='line'>  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;/blog/archives&quot;</span><span class="nt">&gt;</span>归档<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
</span><span class='line'>  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;/about&quot;</span><span class="nt">&gt;</span>关于<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
</span><span class='line'><span class="nt">&lt;/ul&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>上面的about需要你新建一个页面：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rake new_page<span class="o">[</span><span class="s1">&#39;about&#39;</span><span class="o">]</span>  <span class="c">#创建一个页面，页面路径为source\about\index.markdown</span>
</span></code></pre></td></tr></table></div></figure>


<h3>侧边栏配置</h3>

<p>修改<code>_config.yml</code>中：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>default_asides: <span class="o">[</span>asides/recent_posts.html, asides/github.html<span class="o">]</span>      <span class="c">#设置默认边栏包含哪些组件</span>
</span><span class='line'>
</span><span class='line'><span class="c"># blog_index_asides:                                                #索引页面的侧边栏</span>
</span><span class='line'><span class="c"># post_asides:                                                      #日志页面的侧边栏(通过rake new_post 创建的)</span>
</span><span class='line'><span class="c"># page_asides:                                                      #静态页面的侧边栏(通过rake new_page 创建的)</span>
</span></code></pre></td></tr></table></div></figure>


<h3>添加文章分类列表到侧边栏</h3>

<p>octopress没有自带的支持，所以要自己动手。
这位网友写好了轮子并开源了出来，见<a href="https://github.com/tokkonopapa/octopress-tagcloud">https://github.com/tokkonopapa/octopress-tagcloud</a>
将其下载下来后，将tag_cloud.rb拷贝到plugins目录，
然后在source/_includes/custom/aside 中新建category_list.html，键入以下内容：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;section&gt;</span>
</span><span class='line'>  <span class="nt">&lt;h1&gt;</span>Categories<span class="nt">&lt;/h1&gt;</span>
</span><span class='line'>  <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;categories&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    { % category_list [counter:true] % }
</span><span class='line'>  <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'><span class="nt">&lt;/section&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>拷贝代码的话，请将{和%之间的空格去掉。</p>

<p>再修改_config.yml:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>default_asides: [custom/asides/category_list.html, asides/recent_posts.html, asides/github.html]
</span></code></pre></td></tr></table></div></figure>


<h3>将关于我们添加到侧边栏</h3>

<p>octopress自带了关于我们模板：source/_includes/custom/asides/about.html
修改后自行把它加到边栏：
default_asides:     [custom/asides/category_list.html, asides/recent_posts.html, asides/github.html, custom/asides/about.html]</p>

<p>将新浪微博秀添加到边栏的关于我们：</p>

<p>在<a href="http://app.weibo.com/tool/weiboshow">http://app.weibo.com/tool/weiboshow</a>这里获得自己的秀代码，嵌入到about.html中：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;section&gt;</span>
</span><span class='line'>  <span class="nt">&lt;h1&gt;</span>About me<span class="nt">&lt;/h1&gt;</span>
</span><span class='line'>  <span class="c">&lt;!-- 嵌入微博秀代码 --&gt;</span>
</span><span class='line'>  <span class="nt">&lt;p&gt;&lt;/p&gt;</span>
</span><span class='line'><span class="nt">&lt;/section&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<h3>添加留言评论功能</h3>

<ul>
<li>octopress自带了DISQUS支持，你需要到DISQUS官网申请好账号，之后再新建一个site。</li>
<li>新建site的入口改到了settings->admin->(汉堡菜单)Add new site</li>
<li>最后将site短地址填到disqus_short_name中（_config.yml）</li>
</ul>


<h3>添加国内社交网站分享和留言评论功能</h3>

<p>由于DISQUS服务器在国外，访问较慢，你可以使用国内的留言评论服务。
这部分<a href="http://www.devtang.com/blog/2012/02/10/setup-blog-based-on-github/">唐巧的博客</a>已经阐述过了，
这里不再重复，请参见唐巧的博客中"高级配置"段。</p>

<h3>加入google analytics</h3>

<ul>
<li>octopress自带了google analytics支持。</li>
<li>在<a href="http://www.google.com/analytics/">http://www.google.com/analytics/</a>创建帐号和站点。</li>
<li>修改_config.yml的google_analytics_tracking_id字段。</li>
<li>如果你的博客域名是github的二级域名（比如我这个agdsdl.github.io），你还需要修改source/_includes/google_analytics.html：</li>
</ul>


<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>_gaq.push([&#39;_setAccount&#39;, &#39;UA-65560025-1&#39;]);
</span><span class='line'>_gaq.push([&#39;_setDomainName&#39;,&#39;github.io&#39;]);
</span><span class='line'>_gaq.push([&#39;_trackPageview&#39;]);
</span></code></pre></td></tr></table></div></figure>


<p>好了，到这里我们一些基本设置都完成了，但是octopress里每个文件都是可以修改的，你可以自己修改成喜欢的样式。
网上有很多这样的文章，你可以在文末的参考文章中进一步阅读。</p>

<h2>写博客</h2>

<p>用这个命令生成一个markdown文件，</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>rake new_post[post-name]
</span></code></pre></td></tr></table></div></figure>


<p>然后修改这个markdown文件。<a href="http://www.ituring.com.cn/article/23">markdown语法简略版</a>,<a href="http://wowubuntu.com/markdown/">markdown语法完整版</a></p>

<h3>博客首页只显示摘要</h3>

<p>在文章中插入</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="err">&lt;</span>！-- more --&gt;
</span></code></pre></td></tr></table></div></figure>


<p>(拷贝代码的话，请将中文感叹号改成英文感叹号)</p>

<p>在首页列表中文章就只显示到这个位置并在下方显示加载更多（Read on →）</p>

<h2>写静态页面</h2>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>rake new_page[super-awesome]
</span></code></pre></td></tr></table></div></figure>


<h2>部署</h2>

<p>在rake deploy之前，你必须运行：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>rake setup_github_pages
</span></code></pre></td></tr></table></div></figure>


<p>将你的<code>Git Url</code> 输入进去完成github配置。</p>

<p>之后就能</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>rake generate  #生成本地网页
</span><span class='line'>rake deploy    #推送到github
</span></code></pre></td></tr></table></div></figure>


<h2>source管理</h2>

<p>上面将生成的网页都推送到github了。可是本地的配置文件和blog源文件要怎么管理？
用下面的命令可以将源码推送到github上的source分支：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>git add .
</span><span class='line'>git commit -m &quot;your message&quot;
</span><span class='line'>git push origin source
</span></code></pre></td></tr></table></div></figure>


<h2>在其他电脑上同步你的Octopress博客</h2>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git clone https://github.com/your_account/your_account.github.io.git
</span><span class='line'><span class="nb">cd </span>your_account
</span><span class='line'>git checkout <span class="nb">source</span> <span class="c">#切换到source分支</span>
</span><span class='line'>rake preview <span class="c">#先preview测试一下</span>
</span><span class='line'><span class="c">#CTRL-C结束preview</span>
</span><span class='line'><span class="c">#在新的电脑环境需要重新设置github账户：</span>
</span><span class='line'>rake setup_github_pages
</span><span class='line'><span class="c">#然后就可以发布了：</span>
</span><span class='line'>rake deploy
</span></code></pre></td></tr></table></div></figure>


<h2>OS X EI Capitan 更新</h2>

<p>升级到新系统后，<code>rake preview</code>可能会报错：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rake preview
</span><span class='line'>Starting to watch <span class="nb">source </span>with Jekyll and Compass. Starting Rack on port 4000
</span><span class='line'>rake aborted!
</span><span class='line'>Errno::ENOENT: No such file or directory - jekyll
</span></code></pre></td></tr></table></div></figure>


<p>这需要更新到最新ruby（2.2.3），用：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>ruby --version
</span><span class='line'>ruby 2.0.0p645 <span class="o">(</span>2015-04-13 revision 50299<span class="o">)</span> <span class="o">[</span>universal.x86_64-darwin15<span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>


<p>来确定ruby的版本号。</p>

<p>rbenv是很好的ruby版本管理工具，我们用rbenv来升级ruby。</p>

<p>首先升级rbenv，而rbenv是通过Homebrew管理的，所以要先升级Homebrew。</p>

<p>可以通过下面命令来升级brew和rbenv：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>brew update
</span><span class='line'>brew install rbenv ruby-build
</span></code></pre></td></tr></table></div></figure>


<p>可是我更推荐用一个图形化管理工具<a href="https://www.cakebrew.com/">Cakebrew</a>来升级。</p>

<p>更新完rbenv后，再更新ruby：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv install 2.2.3
</span></code></pre></td></tr></table></div></figure>


<p>然后设置要使用的ruby版本：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv global 2.2.3 <span class="c">#设置全局ruby版本</span>
</span><span class='line'>rbenv <span class="nb">local </span>2.2.3 <span class="c">#设置本地ruby版本</span>
</span></code></pre></td></tr></table></div></figure>


<p>要使rbenv的设置生效，需要在<code>~/.bash_profile</code>中加入这一句：<code>eval "$(rbenv init -)"</code>,然后重启终端。</p>

<p>验证一下ruby版本：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>ruby --version
</span><span class='line'>ruby 2.2.3p173 <span class="o">(</span>2015-08-18 revision 51636<span class="o">)</span> <span class="o">[</span>x86_64-darwin15<span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>


<p>重新安装Octopress的依赖：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>gem install bundler
</span><span class='line'>When the above completes
</span><span class='line'>rbenv rehash
</span><span class='line'>bundle install
</span></code></pre></td></tr></table></div></figure>


<p>这时应该没问题了。</p>

<h2>参考</h2>

<p><a href="https://stackoverflow.com/questions/46377667/docker-for-mac-mkmf-rb-cant-find-header-files-for-ruby">系统升级10.14后ruby路径问题</a></p>

<p><a href="https://blog.shuiba.co/comment-systems-recommendation">一些评论系统简述</a>
<a href="https://aimingoo.github.io/1-1722.html">gitment跨站问题</a></p>

<p><a href="http://blog.devtang.com/2012/02/10/setup-blog-based-on-github/">http://blog.devtang.com/2012/02/10/setup-blog-based-on-github/</a></p>

<p><a href="http://www.cnblogs.com/oec2003/archive/2013/05/31/3109577.html">http://www.cnblogs.com/oec2003/archive/2013/05/31/3109577.html</a></p>

<p><a href="http://yulingtianxia.com/blog/2014/04/05/macosx10-dot-9shang-yong-octopresshe-githubda-jian-ge-ren-bo-ke/">http://yulingtianxia.com/blog/2014/04/05/macosx10-dot-9shang-yong-octopresshe-githubda-jian-ge-ren-bo-ke/</a></p>

<p><a href="http://octopress.org/docs/">http://octopress.org/docs/</a></p>

<p><a href="http://schalkneethling.github.io/blog/2015/10/16/errno-enoent-no-such-file-or-directory-jekyll-octopress-el-capitan/">http://schalkneethling.github.io/blog/2015/10/16/errno-enoent-no-such-file-or-directory-jekyll-octopress-el-capitan/</a></p>

<p><a href="http://about.ac/2012/04/install-ruby-with-rbenv.html">http://about.ac/2012/04/install-ruby-with-rbenv.html</a></p>
</div>

</article>
<!-- 
	<div class="share">
	<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
	
	
	
	
	
	<a class="addthis_button_compact"></a>
	<a class="addthis_counter addthis_bubble_style"></a>
	</div>
  <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid="></script>
</div>

 -->


<section id="comment">
    <h1 class="title">Comments</h1>
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script>
    const gitalk = new Gitalk({
    clientID: '29bbf743e30b99394771',
    clientSecret: '41e4b7f1aa79742fc459f2971ad51596df5e4dda',
    repo: 'agdsdl.github.io',
    owner: 'agdsdl',
    admin: ['agdsdl'],
    id: location.pathname,      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
    })

    gitalk.render('gitalk-container')
    </script>
</section></div>
			</div>
			<footer id="footer" class="inner">Copyright &copy; 2019

    zhidong

<br>
Powered by Octopress.

Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a></footer>
			<script src="/javascripts/slash.js"></script>
<!-- <script src="/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
	$('.fancybox').fancybox();
})(jQuery);
</script> Delete or comment this line to disable Fancybox -->




	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-65560025-1']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>



		</div>
	</div>
</body>
</html>
